import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
import { Options } from 'sortablejs';
import { cloneDeep } from 'lodash-es';
import { MonkFormDesignConfig, MONK_FORMDEISGN_CONFIG } from '../../monk-form-design.interface';
import { MonkFormDesignComponent } from '../../monk-form-design.component';
@Component({
  selector: 'app-design-form-component-panel',
  templateUrl: './design-form-component-panel.component.html',
  styleUrls: ['./design-form-component-panel.component.scss']
})
export class DesignFormComponentPanelComponent {
  @Input() data: any
  @Input() selectItem: any;
  @Input() startType: string;
  @Output() readonly handleSetSelectItem: EventEmitter<any> = new EventEmitter()
  options: Options = {
    group: 'draggable-box',
    // ghostClass: 'moving',
    // animation: 180,
    handle: '.drag-move',
    onAdd: this.deepClone.bind(this)
  };
  insertAllowedType: string[]= [
    "input",
    "textarea",
    "number",
    "select",
    "checkbox",
    "radio",
    "date",
    "time",
    "rate",
    "slider",
    "uploadFile",
    "uploadImg",
    "cascader",
    "treeSelect",
    "switch",
    "text",
    "html"
  ];
  constructor(
    @Optional() @Inject(MONK_FORMDEISGN_CONFIG) public config: MonkFormDesignConfig,
    private monkFormDesignComponent: MonkFormDesignComponent,
  ) {
  }

    deepClone(evt) {
      const newIndex = evt.newIndex;
      // json深拷贝一次
      //const listString = JSON.stringify(this.data.list);
      this.data.list = cloneDeep(this.data.list)// JSON.parse(listString);
      // 删除icon及compoent属性
      delete this.data.list[newIndex].icon;
      delete this.data.list[newIndex].component;
      this.handleSetSelectItem.emit(this.data.list[newIndex]);
    }

    trackByFn(index: number, item: any): any {
      return item.key; // 使用唯一标识符作为标识
    }
    
    handleColAdd($event) {
      const {
        evt, columns, isCopy = false
      } = $event

      // 重置或者生成key值
      const newIndex = evt.newIndex;
      const key = columns[newIndex].type + "_" + new Date().getTime();
      if (columns[newIndex].key === "" || isCopy) {
        // this.$set(columns, newIndex, {
        //   ...columns[newIndex],
        //   key,
        //   model: key
        // });
        columns[newIndex] = {
          ...columns[newIndex],
          key,
          model: key
        }
        /** 
        if (this.noModel.includes(columns[newIndex].type)) {
          // 删除不需要的model属性
          delete columns[newIndex].model;
        }
        */
        if (typeof columns[newIndex].options !== "undefined") {
          // 深拷贝options
          //const optionsStr = JSON.stringify(columns[newIndex].options);
          columns[newIndex].options = cloneDeep(columns[newIndex].options) //JSON.parse(optionsStr);
        }
        if (typeof columns[newIndex].rules !== "undefined") {
          // 深拷贝rules
          //const rulesStr = JSON.stringify(columns[newIndex].rules);
          columns[newIndex].rules = cloneDeep(columns[newIndex].rules) //JSON.parse(rulesStr);
        }
        if (typeof columns[newIndex].list !== "undefined") {
          // 深拷贝list
          columns[newIndex].list = [];
        }
        if (typeof columns[newIndex].columns !== "undefined") {
          // 深拷贝columns
          //const columnsStr = JSON.stringify(columns[newIndex].columns);
          columns[newIndex].columns = cloneDeep(columns[newIndex].columns)// JSON.parse(columnsStr);
          // 复制时，清空数据
          columns[newIndex].columns.forEach(item => {
            item.list = [];
          });
        }
        if (columns[newIndex].type === "table") {
          // 深拷贝trs
          //const trsStr = JSON.stringify(columns[newIndex].trs);
          columns[newIndex].trs = cloneDeep(columns[newIndex].trs)// JSON.parse(trsStr);
          // 复制时，清空数据
          columns[newIndex].trs.forEach(item => {
            item.tds.forEach(val => {
              val.list = [];
            });
          });
        }
      }
      // 深拷贝数据
      //const listString = JSON.stringify(columns[newIndex]);
      columns[newIndex] = cloneDeep(columns[newIndex]) //JSON.parse(listString);
      this.handleSetSelectItem.emit(columns[newIndex]);
    }

    handleCopy(isCopy = true, data) {
    }
    handleDelete($event) {  
      const traverse = array => {
        array = array.filter((element, index) => {
          if (["grid", "tabs", "selectInputList", 'collapse'].includes(element.type)) {
            // 栅格布局
            element.columns.forEach(item => {
              item.list = traverse(item.list);
            });
          }
          if (element.type === "card" || element.type === "batch" || element.type === "block") {
            // 卡片布局
            element.list = traverse(element.list);
          }
          if (element.type === "table") {
            // 表格布局
            element.trs.forEach(item => {
              item.tds.forEach(val => {
                val.list = traverse(val.list);
              });
            });
          }
          if (element.key !== this.selectItem.key) {
            return true;
          } else {
            if (array.length === 1) {
              this.handleSetSelectItem.emit({ key: "" });
              //this.handleSelectItem({ key: "" });
            } else if (array.length - 1 > index) {
              this.handleSetSelectItem.emit(array[index + 1]);
              //this.handleSelectItem();
            } else {
              this.handleSetSelectItem.emit(array[index - 1]);
              //this.handleSelectItem();
            }
            return false;
          }
        });
        return array;
      };
      this.data.list = traverse(this.data.list);
      // TODO 抽离attrlist不使用@Input, 到options中通过方法接口注入
      // if (this.config.handleDeleteItem) {
      //   this.config.handleDeleteItem(this, $event);
      // }
      if (this.monkFormDesignComponent.attrLists) {
        const list = this.monkFormDesignComponent.recursiveGetComponentList()
        const modelKeyList = list.map(l => l.model)
        this.monkFormDesignComponent.attrLists.forEach(attr => {
          attr.disabled = modelKeyList.includes(attr.jsonPath)
        })
      }
    }
}
